<template name="orderItem">
	<block>
	    <view class="order-item">
			
	        <view class="order-item-header" v-if="type=='list'">
	            <view class="label">
					<u-tag text="代驾" size="mini" type="warning" v-if="order.is_drive==1"></u-tag>
					<u-tag text="自驾" size="mini" type="success" v-else></u-tag>
					<text class="order_sn">{{order.order_sn}}</text>
				</view>
	            <view class="span">
					<view class="span">
						<block v-if="order.order_status_name=='待付款' && order.is_pay==0 && order.is_retainer==1">
							<count-down :closetime="order.retainer_last_time" type="order"></count-down>
						</block>
						<block v-else>
							{{order.order_status_name}}
						</block>
					</view>
				</view>
	        </view>
	        <view class="order-car-info">
	            <view class="com-car">
	            	<view class="figure">
	            		<view class="thumb-tag" style=""></view>
	            		<image class="img" mode="aspectFill" :src="car.thumb"></image>
	            	</view>
	            	<view class="com-car-desc">
	            		<view class="title" :class="car.car_info.gearbox=='手动挡'?'title-hand':'title-auto'">
	            			<view class="p aui-ellipsis-1">{{car.name}}</view>
	            			<view class="em"></view>
	            		</view>
	            		<view class="plate-type">
							<text>{{car.car_info.gearbox}}</text>
							<text>{{car.car_info.year}}年</text>
							<text>{{car.car_info.car_level}}</text>
							<text>{{car.car_info.seat}}</text>
							<text>{{car.car_info.door}}</text>
						</view>
	            		<view class="daily-limit" v-if="type!='list'">图片仅供参考 以门店提供实物为准</view>
	            	</view>
	            </view>
	        </view>
			<navigator :url="type=='list'?'/pages/order/detail/index?id='+order.id:''">
	        <view class="order-item-range">
	            <view class="time-con rentTime">
	                <view class="strong">{{order.start_day.day}}</view>
	                <text class="time">{{order.start_day.week}} {{order.start_day.time}}</text>
	            </view>
	            <view class="range">{{order.days_num}}天</view>
	            <view class="time-con revertTime">
	                <view class="strong">{{order.end_day.day}}</view>
	                <text class="time">{{order.end_day.week}} {{order.end_day.time}}</text>
	            </view>
	        </view>
			</navigator>
	        <view class="order-item-address">
	            <view class="rent-address address">
	                <view class="strong">{{order.gain_type_name}}</view>
	                <text v-if="order.gain_type===1" class="p aui-ellipsis-1" @click="openLocation(order.gain_lat,order.gain_lng,order.gain_name,order.gain_address)">{{order.gain_name}}</text>
					<text v-if="order.gain_type===2" class="p aui-ellipsis-1" @click="openLocation(order.gain_store.lat,order.gain_store.lng,order.gain_store.name,order.gain_store.address)">{{order.gain_store.name}}</text>
	            </view>
	            <view class="revert-address address">
	                <view class="strong">{{order.back_type_name}}</view>
	                <text v-if="order.back_type===1" class="p aui-ellipsis-1" @click="openLocation(order.back_lat,order.back_lng,order.back_name,order.back_address)">{{order.back_name}}</text>
					<text v-if="order.back_type===2" class="p aui-ellipsis-1" @click="openLocation(order.back_store.lat,order.back_store.lng,order.back_store.name,order.back_store.address)">{{order.back_store.name}}</text>
	            </view>
	        </view>
			
			<block v-if="type=='list' && order.is_drive==1">
				<view class="driver">
					<view v-if="order.driver_status==0">正在分配司机，请耐心等候...</view>
					<view v-else>司机：{{order.driver_name}}</view>
					<view class="change-driver">{{order.driver_status==0?'未接单':'已接单'}}</view>
				</view>
			</block>
				
	        <view class="order-item-footer" v-if="type=='list'">
				<mars-orderStatus :order="order" @refresh="refresh"></mars-orderStatus>
	        </view>
	    </view>
	</block>
	
</template>

<script>
export default {
	name: 'orderItem',
	props: {
		order:{
			type:[Object,Array],
			default:{}
		},
		car:{
			type:[Object,Array],
			default:{}
		},
		type:{
			type:[String],
			default:"list"
		}
	},
	data() {
		return {
		};
	},
	watch: {
	},
	computed: {
	},
	methods: {
		//打开地图导航
		openLocation(lat,lng,name,address){
			uni.openLocation({
			    latitude: lat,
			    longitude: lng,
				name:name,
				address:address,
			    success: function () {
			        //console.log('success');
			    },
				fail:function(e){
					console.log(e);
				}
			});
		},
		//刷新订单列表
		refresh(){
			this.$emit('refresh',true)
		}		
	}
};
</script>

<style lang="scss">
	.order-item {
	    position: relative;
	    margin-bottom: 20rpx;
	    padding: 0 30rpx 30rpx;
	    overflow: hidden;
	    background-color: #fff;
	    border-radius: 20rpx;
	}
	
	.order-item .order-car-info{
		border-top: 1rpx solid #F2F2F2;
	}
	
	.order-item-last {
	    margin-bottom: 0;
	}
	
	.order-item-header {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    padding-top: 30rpx;
	    font-size: 26rpx;
		padding-bottom: 20rpx;
	}
	
	.order-item-header .label {
	    display: flex;
	    flex: 1;
	    color: #666;
	}
	
	.order-item-header .label .order_sn{
	    margin-left: 10rpx;
	}
	
	.order-item-header .span {
	    display: block;
	    color: #333;
	}
	
	.order-item .plus {
	    display: block;
	    color: #d07a3c;
	    font-size: 24rpx;
	}
	
	.order-item .plus.disabled {
	    color: #8a8a9c;
	}
	
	.order-item .divider {
	    height: 1px;
	    margin-top: 18rpx;
	    background: #f2f2f2;
	}
	
	.order-item.is-hide-owner .com-car {
	    padding-top: 0;
	}
	
	.order-item-address .address,.order-item-range,.order-item-range .range {
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.order-item-range {
	    padding: 40rpx 0;
	    background: #fff;
	}
	
	.order-item-range .time-con .strong {
	    display: block;
	    color: #333;
	    font-weight: 700;
	    font-size: 32rpx;
	    text-align: center;
	}
	
	.order-item-range .time-con .time {
	    display: block;
	    color: #666;
	    font-size: 28rpx;
	    text-align: center;
	}
	
	.order-item-address .address,.order-item-range .range {
	    font-size: 28rpx;
	}
	
	.order-item-range .range {
	    flex: 1;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	    margin: 0 40rpx;
	    color: #666;
	    text-align: center;
	}
	
	.order-item-range .range::after,.order-item-range .range::before {
	    width: 45rpx;
	    height: 1px;
	    background-color: #ccc;
	    content: '';
	}
	
	.order-item-address {
	    position: relative;
	    overflow: hidden;
	    background: #fff;
	}
	
	.order-item-address::before {
	    position: absolute;
	    top: 15rpx;
	    left: 8rpx;
	    z-index: 1;
	    width: 1px;
	    height: 70rpx;
	    background-color: #eee;
	    content: '';
	}
	
	.order-item-address .address {
	    // z-index: 2;
	    margin-bottom: 30rpx;
	    padding-left: 30rpx;
	    overflow: hidden;
	}
	
	.order-item-address .address:last-child {
	    margin-bottom: 0;
	}
	
	.order-item-address .address .strong {
	    display: block;
	    margin-right: 20rpx;
	    color: #333;
	}
	
	.order-item-address .address .p {
	    display: block;
	    flex: 1;
	    width: 100%;
	    color: #666;
	}
	
	.order-item-address .address .arrow {
	    display: block;
	    width: 30rpx;
	    height: 30rpx;
	    background: url(../../static/images/icon-arrow.png) center right no-repeat;
	    background-size: 100%;
	}
	
	.order-item-address .address::before {
	    position: absolute;
	    top: 50%;
	    left: 0;
	    width: 18rpx;
	    height: 18rpx;
	    transform: translateY(-50%);
	    content: '';
	}
	
	.order-item-address .address.arrow::after {
	    display: block;
	    width: 15rpx;
	    height: 15rpx;
	    margin-left: 15rpx;
	    background: url(../../static/images/icon-arrow.png) right center no-repeat;
	    background-size: contain;
	    opacity: .5;
	    content: '';
	}
	
	.order-item-address .rent-address::before {
	    background: url() 50% no-repeat;
	    background-size: cover;
	}
	
	.order-item-address .revert-address::before {
	    background: url() 50% no-repeat;
	    background-size: cover;
	}
	
	.order-item-footer {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-pack: end;
	    justify-content: flex-end;
	    padding-top: 30rpx;
	}
	
	.com-car,.com-car-desc {
	    width: 100%;
	    overflow: hidden;
	}
	
	.com-car {
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	    padding: 30rpx 0;
	    background: #fff;
	    border-bottom: 1px solid #f2f2f2;
	}
	
	.com-car .figure {
	    position: relative;
	    -ms-flex-negative: 0;
	    flex-shrink: 0;
	    width: 206rpx;
	    height: 142rpx;
	    margin-right: 30rpx;
	    border-radius: 4rpx;
	}
	
	.com-car .figure.yanxuan {
	    border: solid 6rpx #ecc571;
	}
	
	.com-car .figure.yanxuan .img {
	    border-radius: 0;
	}
	
	.com-car .figure .img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    background: #f5f5f5;
	    border-radius: 4rpx;
	}
	
	.com-car .figure .thumb-tag {
	    position: absolute;
	    top: -6rpx;
	    left: -6rpx;
	    z-index: 9;
	    display: block;
	}
	
	.com-car-desc {
	    flex: 1;
	}
	
	.com-car-desc .title {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    margin-top: -5rpx;
	    margin-bottom: 5rpx;
	    overflow: hidden;
	    font-weight: 700;
	    font-size: 34rpx;
	}
	
	.com-car-desc .title .p {
	    display: block;
	    max-width: -webkit-calc(100% - 44rpx);
	    line-height: 1.4;
	}
	
	.com-car-desc .title .aui-ellipsis-1 {
	    display: block;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	
	.com-car-desc .title .em {
	    display: block;
	    width: 34rpx;
	    height: 34rpx;
	    margin-left: 10rpx;
	}
	
	.com-car-desc .title.title-hand .em {
	    background: url(../../static/images/icon-shou.png) 50% no-repeat;
	    background-size: cover;
	}
	
	.com-car-desc .title.title-auto .em {
	    background: url(../../static/images/icon-zi.png) 50% no-repeat;
	    background-size: cover;
	}
	
	.com-car-desc .plate-type {
	    margin-bottom: 20rpx;
	    color: #666;
	    font-size: 26rpx;
	}
	
	.com-car-desc .plate-type text{
		margin-right: 10rpx;
	}
		
	.com-car-desc .daily-limit {
	    color: #BBBBBB;
	    font-size: 26rpx;
	}
	
	.com-car-pms .com-car-desc .daily-limit {
	    color: #999;
	    font-size: 24rpx;
	}
	.driver{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		padding: 10rpx 0rpx;
		margin-top: 15rpx;
		border-top: 1rpx solid #F2F2F2;
	}
</style>
